<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 床位信息管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="楼栋">
            <el-select
                v-model="query.buildingId"
                filterable
                placeholder="请选择楼栋名"
                @focus="getBuilding"
                class="handle-input mr10"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.sid"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="
                padding-left: 50px;
                color: var(--el-text-color-secondary);
                font-size: 13px; ">{{ item.region }}</span>
                <span style="
                 padding-left: 50px;
                color: var(--el-text-color-secondary);
                font-size: 13px; "
                >{{ item.type }}</span
                >
                <span style="
                 padding-left: 50px;
                color: var(--el-text-color-secondary);
                font-size: 13px; "
                >【{{ item.floor }}】层</span
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-input
              v-model="query.roomName"
              placeholder="房间"
              class="handle-input mr10"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索
          </el-button
          >
          <el-button @click="onReset">重置</el-button>
        </el-form>
      </div>
      <el-divider/>
      <div class="clits">
        <div><i class="el-icon-s-data"></i>房间信息列表</div>
      </div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header">
        <el-table-column label="房间信息" align="center">
          <el-table-column label="房间" width="150" align="center">
            <template #default="scope">
              【{{ scope.row.name }}】室
            </template>
          </el-table-column>
          <el-table-column label="楼层" width="150" align="center">
            <template #default="scope">
              第【{{ scope.row.floor }}】层
            </template>
          </el-table-column>
          <el-table-column label="床位数量" width="150">
            <template #default="scope">
              共有【{{ scope.row.bed }}】个床位
            </template>
          </el-table-column>
          <el-table-column prop="colorString" label="房间状态" width="150" align="center"/>
          <el-table-column label="床位" align="center">

            <template #default="scope">
              <div v-for="item in scope.row.bedList" :key="item.sid"
                   style="display: inline;flex-direction: column;padding-right: 10px; ">
                <button style="padding-right: 20px ;" @click="handleRoom(item)">
                  <img style="width: 30px; display: inline"
                       src="../../assets/img/chaung.png"/>
                  {{ item.name }}
                </button>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center"
              fixed="right"
          >
            <template #default="scope">
              <el-button
                  type="text"
                  @click="handleAll(scope.row)"
              >查看全部
              </el-button>
              <!--              <el-button-->
              <!--                  type="text"-->
              <!--                  icon="el-icon-delete"-->
              <!--                  class="red"-->
              <!--                  @click="handleDelete(scope.$index, scope.row.sid)"-->
              <!--              >删除-->
              <!--              </el-button-->
              <!--              >-->
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            :currentPage="query.pageNum"
            :page-sizes="[10, 20, 40]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          v-model="dialogVisible"
          title="该床位信息"
          width="30%"
          :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="公寓名称">
            <el-input v-model="inputEnty.buildingName" disabled/>
          </el-form-item>
          <el-form-item label="所属楼层">
            <el-input v-model="inputEnty.floorNum" disabled/>
          </el-form-item>
          <el-form-item label="房间号">
            <el-input v-model="inputEnty.roomName" disabled/>
          </el-form-item>
          <el-form-item label="床位名">
            <img style="width: 90%;height: 120px; display: inline"
                 src="../../assets/img/rzhu.png"/>
            <el-input v-model="inputEnty.bedName" disabled/>
          </el-form-item>
          <el-form-item label="学生名">
            <el-input v-model="inputEnty.studentName" disabled/>
          </el-form-item>
          <el-form-item label="学院">
            <el-input v-model="inputEnty.collegeName" disabled/>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="inputEnty.majorName" disabled/>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="inputEnty.className" disabled/>
          </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
      </el-dialog>
    </div>

    <div style="height: 100%">
      <el-dialog
          v-model="importVisible"
          title="房间信息"
          width="50%"
          :before-close="handleClose">
        <div style="display: flex;padding-left: 50px">
          <el-form :inline="true" :model="Entydate" class="demo-form-inline">
            <el-form-item label="房间名">
              <el-input v-model="Entydate.roomName" disabled/>
            </el-form-item>
            <el-form-item label="房间类型">
              <el-input v-model="Entydate.typeNum" disabled style="display: inline;"/>
            </el-form-item>
            <el-form-item label="床位状态">
              <el-input v-model="Entydate.bedState" disabled/>
            </el-form-item>
          </el-form>
        </div>
        <el-divider/>
        <div v-for="item in allDate" :key="item">

          <el-col :span="12">
            <el-card class="mgb20 " style=" margin-right: 15px">
              <img style="width: 60%;height: 120px; display: inline;padding-left: 80px"
                   src="../../assets/img/rzhu.png"/>
              <div class="form-box" style="padding-left: 60px">
                <span style="
                 padding-left: 50px;
                color: var(--el-text-color-secondary);
               font-size: 16px; color: blue"
                >床位名：{{ item.bedName }}</span>
                <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                font-size: 16px;color: blue "
                > 学生姓名：{{ item.studentName }}</span>
                <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                font-size: 16px; color: blue"
                > 学院：{{ item.collegeName }}</span>
                <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                font-size: 16px; color: blue"
                > 专业：{{ item.majorName }}</span>
                <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
              font-size: 16px; color: blue"
                > 班级：{{ item.className }}</span>
              </div>
            </el-card>
          </el-col>
        </div>
        <div v-if="allDate.length==3 || allDate.length==1">
          <el-card>
            <img style="width: 60%;height: 120px; display: inline;padding-left: 80px"
                 src="../../assets/img/cc.png"/>
            <div class="form-box" style="padding-left: 60px">
                <span style="
                 padding-left: 50px;
                color: var(--el-text-color-secondary);
               font-size: 20px; color: red"
                >床位名：此床只作为占格使用</span>
              <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                font-size: 16px;color: blue "
              > 学生姓名：</span>
              <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                font-size: 16px; color: blue"
              > 学院：</span>
              <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                font-size: 16px; color: blue"
              > 专业：</span>
              <span style="
                 padding-left: 50px;
                 display: flex;
                color: var(--el-text-color-secondary);
                 font-size: 16px; color: blue"
              > 班级：</span>
            </div>
          </el-card>
        </div>
        <el-divider/>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="importVisible = false">关闭</el-button>
            </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {useRouter} from "vue-router";
import {reactive, ref} from "vue";
import request from "../../utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "BedStudent",

  setup() {
    const root = "/room/";
    const router = useRouter();
    const query = reactive({
      buildingId: "",
      roomName: "",
      pageNum: 1,
      pageSize: 10,
    });
    const inputDate = reactive({
      name: "", //公寓名称
      type: "",//类型
      floorNum: "", //楼层数量
      region: "",
    });
    const childrenDte = ref([]);
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const getData = () => {
      request
          .get(root + "queryRoomBedVo", {
            params: query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
              childrenDte.value = res.data.records.bedList;
              pageTotal.value = res.data.total;
            }
          });
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };
    const rowClass = (row, index) => {
      return {"background-color": row.colorString}
    };
    //楼层
    const options = ref([]);
    const getBuilding = () => {
      request.get("/building/getAll").then((res) => {
        options.value = res.data;
      });
    };
    const inputEnty = reactive({
      bedName: "",
      studentName: "",
      collegeName: "",
      majorName: "",
      className: "",
      roomName:"",
      floorNum:"",
      buildingName:"",
    });
    const handleRoom = (item) => {
      dialogVisible.value = true
      request.get("/bed/queryBedId", {
        params: {bedId: item.sid},
      }).then((res) => {
        inputEnty.buildingName=res.data.buildingName;
        inputEnty.floorNum=res.data.floorNum;
        inputEnty.roomName=res.data.roomName;
        inputEnty.bedName = res.data.bedName;
        inputEnty.studentName = res.data.studentName;
        inputEnty.collegeName = res.data.collegeName;
        inputEnty.majorName = res.data.majorName;
        inputEnty.className = res.data.className;

      });
    };

    //全部
    const Entydate = reactive({
      roomName: "",
      typeNum: 0,
      bedState: "",
    });
    const importVisible = ref(false)
    const allDate = ref([]);
    const handleAll = (row) => {
      Entydate.roomName = row.name
      importVisible.value = true
      request.get("/bed/queryBedStudentList", {
        params: {roomId: row.sid},
      }).then((res) => {
        allDate.value = res.data
        Entydate.typeNum = allDate.value.length + "人间"
        for (var i = 0; i < allDate.value.length; i++) {
          if (tableData.value[i].studentName == null) {
            Entydate.bedState = "存在闲床位"
            break
          } else {
            Entydate.bedState = "无空闲床位"
          }
        }
      });
    };
    const dialogVisible = ref(false)

    const handleClose = (done) => {
      ElMessageBox.confirm('确定关闭窗口吗?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }

    const onReset = () => {
      query.region = "",
          query.roomName = "",
          query.buildingId = ""
    };
    return {
      // props,
      query,
      tableData,
      pageTotal,
      // editVisible,
      childrenDte,
      dialogVisible,
      importVisible,
      inputEnty,
      options,
      allDate,
      Entydate,
      onReset,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      rowClass,
      getBuilding,
      handleClose,
      handleAll,
      // handleAdd,
      //  handleDelete,
      //  handleEdit,
      handleRoom,
    };
  }
}
</script>

<style scoped>
.clits {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>